<script setup lang='ts'>
import { ref, watch } from 'vue'
import { RouterLink } from "vue-router";
import { login } from "@/api/api";
const DialogVisible = ref()
const input = ref('')
const input2 = ref('')
import { ElMessage } from 'element-plus'
const emit = defineEmits(['update:loginDialogVisible','update:isLogin'])
const { loginDialogVisible } = defineProps<{
    loginDialogVisible: boolean
}>()

watch(() => loginDialogVisible, (Value) => {
    DialogVisible.value = Value
})

const warningopen3 = (msg:string,types:any) => {
  ElMessage({
    message: msg,
    type: types,
  })
}
const Cancel = () => {
    input.value = ''
    input2.value = ''
    emit('update:loginDialogVisible', !DialogVisible.value)
}
const Confirm = async() => { 
    const res = await login({mail:input.value,password:input2.value})
    if(res.data.code !== '200') return warningopen3(res.data.msg,'error')
    localStorage.setItem('token',res.data.data.token)
    localStorage.setItem('mail',res.data.data.mailId)
    warningopen3(res.data.msg,'success')
    emit('update:loginDialogVisible', !DialogVisible.value)
    emit('update:isLogin', true)
 }
</script>

<template>
    <el-dialog v-model="DialogVisible" :show-close="false" title="登录" width="500" align-center :close-on-click-modal="false">
        <div class="iptut">
            <div class="title">邮箱：</div><el-input v-model="input" placeholder="请输入邮箱" />
        </div>
        <div class="iptut">
            <div class="title">密码：</div><el-input show-password v-model="input2" placeholder="请输入密码" />
        </div>
        <div class="iptut">
            <RouterLink :to="{name:'reg'}">还没账号？去注册</RouterLink>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="Cancel">关闭</el-button>
                <el-button type="primary" @click="Confirm">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
.title{
    width: 50px;
    font-weight: bold;
}
.iptut{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.iptut:nth-child(3){
    justify-content: right;
}
a{
    text-decoration: none;
}
</style>